<template>
    <el-dialog
        :title="meunSotrtTitle"
        width="40%"
        :visible="visibleSort"
        :destroy-on-close="true"
        :modal-append-to-body="true"
        :before-close="handleClose"
    >
        <el-link type="success" style="margin-bottom: 20px">提示：快去拖动排序吧~~</el-link>
        <div id="tablesort" style="margin-bottom: 40px" ref="tableSort">
            <Table
                :columns="columns"
                :data="treeData"
                :loading="loading"
                @getPageList="findPage"
                :isPagination="false"
                :highlight-current-row="true"
            />
        </div>
    </el-dialog>
</template>

<script>
import Sortable from 'sortablejs'
import Table from '@/components/Table'
export default {
    components: {
        Table
    },
    props: {
        visibleSort: {
            type: Boolean,
            default: false
        },
        treeData: {
            type: Array,
            default: () => []
        },
        meunSotrtTitle: {
            type: String,
            default: '模块排序'
        },
        columns: {
            type: Array,
            default: () => []
        }
    },
    data() {
        return {
            loading: false
        }
    },
    mounted() {
        this.$nextTick(() => {
            this.rowDrop()
            // console.log(this.treeData)
        })
    },
    methods: {
        findPage() {},
        handleClose() {
            this.$emit('update:visibleSort', false)
        },
        btnUp(index) {
            var item = this.items[index]
            this.items.splice(index, 1)
            this.items.unshift(item)
        },
        //行拖拽
        rowDrop() {
            //   this.rowDrop()
            var that = this
            const tbody = document.querySelector('#tablesort tbody')
            console.log('tbody', tbody)
            new Sortable(tbody, {
                dragClass: 'row-tab',
                option(resourceCode) {
                    console.log('400000000000044s', resourceCode)
                },
                onEnd: function (evt) {
                    console.log(evt)
                    var itemEl = evt.item // dragged HTMLElement
                    evt.to // target list
                    evt.from // previous list
                    evt.oldIndex // element's old index within old parent
                    evt.newIndex // element's new index within new parent
                    evt.clone // the clone element
                    evt.pullMode
                    console.log('oldIndex', evt.oldIndex)
                    console.log('newIndex', evt.newIndex)
                    console.log('to', evt.to)
                    console.log('from', evt.from)
                    that.$nextTick(() => {
                        that.treeData.splice(evt.newIndex, 0, that.treeData.splice(evt.oldIndex, 1)[0])
                        var newArray = that.treeData.slice(0)
                        that.treeData = []
                        that.$nextTick(function () {
                            that.treeData = newArray
                        })
                    })
                },
                animation: 150
            })
        }
    }
}
</script>

<style>
.row-tab {
    background: red;
}
.current-row {
    background: #000000 !important;
}
</style>
